<ng-container *ngIf="node && project">
    <form nz-form>
        <nz-form-item>
            <nz-form-label [nzSpan]="6">Pipeline</nz-form-label>
            <nz-form-control [nzSpan]="12"
                *ngIf="node?.context?.pipeline_id && workflow?.pipelines[node.context.pipeline_id]">
                {{workflow.pipelines[node.context.pipeline_id].name}}
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="6">Name</nz-form-label>
            <nz-form-control [nzSpan]="12">
                <input name="name" nz-input [(ngModel)]="node.name" (ngModelChange)="pushChange()" [disabled]="readonly">
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="6">Application (optional)</nz-form-label>
            <nz-form-control *ngIf="applications" [nzSpan]="12">
                <nz-select name="application" nzShowSearch [nzDisabled]="readonly" [(ngModel)]="node.context.application_id" (ngModelChange)="change();pushChange()">
                    <nz-option *ngFor="let app of applications" [nzLabel]="app.name" [nzValue]="app.id" ></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="6">Integration (optional)</nz-form-label>
            <nz-form-control *ngIf="integrations && node.context.application_id" [nzSpan]="12">
                <nz-select name="selectIntegration" nzShowSearch [nzDisabled]="readonly"  [(ngModel)]="node.context.project_integration_id" (ngModelChange)="pushChange()">
                    <nz-option *ngFor="let inte of integrations" [nzLabel]="inte.name" [nzValue]="inte.id"></nz-option>
                </nz-select>
            </nz-form-control>
            <nz-form-control *ngIf="!node.context.application_id"  [nzSpan]="12">
                <nz-alert nzType="info" nzMessage="You must select an application first"></nz-alert>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="6">Environment</nz-form-label>
            <nz-form-control *ngIf="environments"  [nzSpan]="12">
                <nz-select name="selectEnv" nzShowSearch [nzDisabled]="readonly" [(ngModel)]="node.context.environment_id" (ngModelChange)="pushChange()">
                    <nz-option *ngFor="let env of environments" [nzLabel]="env.name" [nzValue]="env.id"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="6">
                <a href="#" [routerLink]="['/docs', 'docs', 'concepts', 'workflow', 'mutex']" target="_blank" rel="noopener noreferrer">
                    Limit one run at a time
                    <span nz-icon nzType="link" nzTheme="outline"></span>
                </a>
            </nz-form-label>
            <nz-form-control  [nzSpan]="12">
                <nz-switch name="mutex" [(ngModel)]="node.context.mutex" (ngModelChange)="pushChange()" [nzDisabled]="readonly"></nz-switch>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nzJustify="end">
            <button nz-button nzType="primary" *ngIf="!readonly" [nzLoading]="loading" (click)="updateWorkflow()">
                <span *ngIf="!editMode">Save</span>
                <span *ngIf="editMode">Apply</span>
            </button>
        </nz-form-item>
    </form>

</ng-container>
